<template>
  <view class="pageContent" >
    <view class="memberMain">
        <view class="memberItem">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">房屋信息</view>
          <view class="memberRight">
            <view class="memberItIn">{{formData.roomInfo+'-'+formData.roomName}}</view>
          </view>
        </view>
        <view class="memberItem">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">成员真名</view>
          <view class="memberRight">
            <view class="memberItIn">{{formData.name || '张三'}}</view>
          </view>
        </view>
        <view class="memberItem">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">申请身份</view>
          <view class="memberRight">
            <view class="memberItIn">{{formData.roleName || ''}}</view>
          </view>
        </view>
        <view class="memberItem">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">身份证号</view>
          <view class="memberRight">
            <view class="memberItIn">{{formData.idCardNumber || ''}}</view>
          </view>
        </view>
        <view class="memberItem">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">手机号码</view>
          <view class="memberRight">
            <view class="memberItIn">{{formData.telephone || '手机号码'}}</view>
          </view>
        </view>
        <view class="memberItem" v-if="formData.idCardFrontUrl || formData.idCardBackUrl">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">证件照片</view>
          <view class="memberUpload">
              <image class="memberUpTrueIc" v-if="formData.idCardFrontUrl" :src="formData.idCardFrontUrl" @click="showPhoto(formData.idCardFrontUrl)"/>
              <image class="memberUpTrueIc" v-if="formData.idCardBackUrl" :src="formData.idCardBackUrl" @click="showPhoto(formData.idCardBackUrl)"/>
          </view>
        </view>
        <view class="memberItem">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">选择有效日期</view>
          <picker class="comePicRight" mode="date" :value="dateLim" @change="chooseLim">
            <!-- <view class="memberItIn">{{formData.dateLim}}</view> -->
            <input class="comePicLimIn" v-model="formData.dateLim" :placeholder="placeholder5" disabled="true"/>
            <image class="comePicLim" :src="localImages +'/date.png'" mode="scaleToFill"/>
          </picker>
        </view>
        <view class="memberItem" v-if="formData.applyReason">
          <text class="memberItSt empty">*</text>
          <view class="memberItTi">TA的留言</view>
          <view class="memberRightMsg">
            <view class="memberItIn">{{formData.applyReason || ''}}</view>
          </view>
        </view>
        <view class="memberItem">
         <text class="memberItSt empty">*</text>
         <view class="memberItTi">审批意见</view>
         <view class="memberRight">
           <input class="memberItIn" v-model="message" placeholder="请填写审批意见" maxlength="20"/>
         </view>
        </view>
        <view class="btMain" v-if="type==0">
          <button class="btOne grey" @click="approvaPut(2)">拒绝</button>
          <button class="btOne" @click="approvaPut(1)">同意</button>
        </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../../static/config.js'
import util from '../../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      id:'',
      formData:{
        roomInfo:'',
        dateLim:'',
        expireDate:'',
      },
      dateLim: '',
      message: '',
      type: '',
    }
  },
  computed: {
  },
  onLoad(options){
    var title='成员入住审批'
    this.id=options.id || 289;
    this.type=options.type || 0;
    if(this.type==1){
      var title='审批详情'
    }
    wx.setNavigationBarTitle({title: title})
    this.approva();
  },
  onShow(){
    util.socketTest();
  },
  onUnload(){
    this.reset()
  },
  methods: {
    reset(){
      this.message=""
    },
    chooseLim(e) {
      var e=e.mp
      console.warn('chooseLim',e)
      this.dateLim = e.detail.value
      this.formData.dateLim = e.detail.value
    },
    approva() {
      var params={roomApplyId :this.id,}
      util.wxRequestPro('/UserServer/owner/info/approva',params)
      .then((res)=>{
        console.warn('approva',res)
        var json=res.param;

        // if(json.idCardFrontUrl) {
        //   json.idCardFrontUrl=config.IMAGE_APIHOST +json.idCardFrontUrl;
        // }
        // if(json.idCardBackUrl) {
        //   json.idCardBackUrl=config.IMAGE_APIHOST +json.idCardBackUrl;
        // }
        this.formData=json;
        if(!json.expireDate) {
          this.formData.dateLim='永久有效'
        }else {
          this.formData.dateLim=json.expireDate
        }
        this.dateLim=json.expireDate || '';
      })
    },
    approvaPut(result=0) {
      //租客撤回传0,业主：同意传1，拒绝传2.
      var params={
        roomApplyId:this.id,
        processResult:result,
        expireDate:this.dateLim,
      }
      if(this.message){
        params['message']=this.message
      }
      var putUrl=util.stringifyQs(params);
      console.warn('putUrl',putUrl)
      util.wxRequestPro('/UserServer/owner/info/approva?'+putUrl,{},'PUT')
      .then((res)=>{
        wx.showToast({
            title: "操作成功",
            icon: 'none'
        });
        setTimeout(()=>{wx.navigateBack()},500)
      })
    },
    showPhoto(...url){
      console.warn('showPhoto',url)
      wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: url // 需要预览的图片http链接列表
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
.pageContent

  background $background
  padding: 20rpx 0rpx 0rpx 0rpx;
.memberTitle{
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  line-height: 42rpx;
  padding: 30rpx 0rpx 20rpx 30rpx;
}
.memberMain{
  background-color #FFFFFF
  padding: 30rpx 30rpx 20rpx 30rpx;
}
.memberMaTi{
  color: #333333;
  line-height: 42rpx;
  font-size: 30rpx;
  padding: 0rpx 0rpx 10rpx 0rpx;
}
.memberType{
  display inline-block
  width: 150rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 6rpx;
  text-align center
  border: 1rpx solid #999999;
}
.memberType.select{
  background-color #7A71FF
  color: #FFFFFF;
}
.memberType + .memberType{
  margin-left 30rpx
}
.memberItem{
  display flex
  align-items center
  // line-height 90rpx
  font-size: 30rpx;
  // border: 1rpx solid #999999;
}
.memberItSt{
  color: #FF6E5D;
}
.memberItSt.empty{
  color #FFFFFF
}
.memberItTi{
  width 150rpx;
  color: #333333;
  margin-right 40rpx;
  // text-align:justify;
  white-space nowrap
  // border: 1rpx solid coral;
}
.memberRight{
  display flex
  height 90rpx
  width 100%
  align-items center
  border-bottom: 1rpx solid #E7E7E7;
}
.memberRightMsg{
  display flex
  width 100%
  min-height 90rpx
  align-items center
  border-bottom: 1rpx solid #E7E7E7;
  // border: 1rpx solid darkkhaki;
}

.memberItIn{
  width 88%
  // border: 1rpx solid #E7E7E7;
}
.memberItIc{
  width: 35rpx;
  height: 30rpx;
  // background: #237DE4;
  margin: 0rpx 10rpx 0rpx 20rpx;
}
.perType{
  display inline-block
  width: 90rpx;
  height: 45rpx;
  line-height: 45rpx;
  border-radius: 4rpx;
  text-align center
  margin-right 20rpx
  color $primary
  border: 1rpx solid $primary;
}
.perType.select{
  background-color $primary
  color: #FFFFFF;
}

.comePicRight{
  position relative
  display flex
  height 90rpx
  width 100%
  align-items center
  border-bottom: 1rpx solid #E7E7E7;
}
.comePicLimIn{
  width 121%
  line-height 90rpx
  text-align right
  // border: 1rpx solid #E7E7E7;
}
.comePicLim{
  position absolute
  right 10rpx
  top 26rpx
  width: 35rpx;
  height: 30rpx;
  // background: #237DE4;
  margin: 0rpx 10rpx 0rpx 0rpx;
}

.memberUpload{
  display flex
  width 100%
  justify-content space-between
  // padding: 20rpx 0rpx 20rpx 0rpx;
  // border: 1rpx solid #E7E7E7;
}
.memberUpTrueIc{
  display inline-block
  vertical-align top
  width: 230rpx;
  height: 152rpx;
  // border: 1rpx solid aqua;
}

.btMain{
  display flex
}
.btOne{
  flex 1
  margin: 60rpx 16rpx 0rpx 16rpx;
}
.btOne.grey{
  background-color #bbb
}
</style>
